<template>
  <div class="loading-box on-top w-full h-full z-1000 bg-cover bg-black">
    <div class="preview-box absolute bottom-[53px] left-[16.5px] w-[342px] h-[82px] flc z-10">
      <RoundedBtn
        v-if="process === 'error'"
        @click="reset"
      >
        重新连接
      </RoundedBtn>
      <div
        v-else
        class="relative rounded-[14px] w-[334px] h-[27px] p-[2px] border border-white"
      >
        <animate-text class="absolute-x-center top-[-20px]" />
        <div class="absolute-y-center right-[10px] text-black text-[13px]">{{ percentage }}%</div>
        <div
          class="w-full h-full rounded-[14px]"
          :style="{ background }"
        >
        </div>
      </div>
      <!-- <div v-else class="loading-bar pt-20px relative text-white">
        <div class="loading-bar-box flex">
          <div v-for="x in 42" :key="x" class="loading-per bg-white w-[4px] h-[12px] mr-[4px]"
            :class="{ 'opacity-30': percentage < (x * (100 / 42)) }"></div>
        </div>
        <div class="absolute top-0 left-0 text-[12px] font-fantasy tracking-2px">LOADING...</div>
        <div class="absolute top-0 right-0 text-[14px]">{{ percentage }}%</div>
      </div> -->
    </div>

    <div
      v-if="!swiper.list.length"
      class="launch on-top w-full h-full"
    >
      <!-- <img
        src="../../../assets/images/page-bg-a.png"
        class="w-full h-full object-cover"
      /> -->
    </div>
    <Swiper
      v-else
      class="x-swiper w-full h-full"
      :autoplay="{ delay: 3000, disableOnInteraction: false }"
      :pagination="{ clickable: true }"
    >
      <swiper-slide
        v-for="x in swiper.list"
        :key="x.id"
        class="x-swiper-item w-full h-full"
      >
        <img
          :src="x.url"
          class="w-full h-full object-cover"
        />
      </swiper-slide>
    </Swiper>
  </div>
</template>

<script
  lang="ts"
  setup
  name="LoadingPage"
>
import useLoading from './hook'

const emit = defineEmits(['beforeStart'])
const { process, swiper, percentage, reset } = useLoading(emit)

const background = computed(() => {
  return `linear-gradient(45deg, white ${percentage.value - 15}%, transparent ${percentage.value + 15}%)`
})

</script>

<style scoped lang="scss">
@keyframes content {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

.launch {
  // background: url(@/assets/images/page-bg.png) no-repeat center center / cover;
}

.preview-box {
  // background: url(@/assets/images/launch-bg.svg) no-repeat center center / 100% 100%;
  animation: content 0.6s linear 0s 1 both;
}
</style>
